<template>
  <div>
    <div id="cesiumContainer" class="fullSize"></div>
  </div>
</template>

<script>
import ZK from '../plugins/zkcloud'
import * as Cesium from 'cesium/Cesium'
import 'cesium/Widgets/widgets.css'


export default {
  name: 'ZKCloudView',
  components: {},
  data() {
    return {
      access_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZGRlYjk3OS1hNGVmLTQ1OGYtYTU3ZS04Y2JmZTQyNTY4Y2MiLCJpZCI6MjEzMDgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzkyNTI4NDh9.rwdvlNHG_VLbINh8gyauZzHwHnK61UXvVb2zLz7tlKM',
      zk: {},
    }
  },
  methods: {
    demoIon3DTiles() {
      var zk = new ZK({
        access_token: this.access_token,
        map: {
          type: 'google',
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        }
      });
      var scene = zk.viewer.scene;
      var viewer = zk.viewer;
      zk.viewer.extend(ZK.viewerMeasureMixin);

      // var tileset = viewer.scene.primitives.add(
      //     new Cesium.Cesium3DTileset({
      //         url: Cesium.IonResource.fromAssetId(69380)
      //     })
      // );
      //
      // viewer.zoomTo(tileset)
      //     .otherwise(function (error) {
      //         console.log(error);
      //  });

      // viewer.camera.flyTo({
      //     destination: Cesium.Cartesian3.fromDegrees(113.384495, 23.128933, 2631.082799425431)
      // });
      // tileset.readyPromise.then(function(tileset) {
      //     T.viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));
      //     T.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
      // });
    },
    demo3DTiles() {
      var zk = new ZK({
        access_token: this.access_token,
        map: {
          type: 'google',
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        }
      });
      var scene = zk.viewer.scene;
      var viewer = zk.viewer;
      zk.viewer.extend(ZK.viewerMeasureMixin);


      // zk.viewer.camera.setView({
      //     destination: new Cesium.Cartesian3(1216403.8845586285, -4736357.493351395, 4081299.715698949),
      //     orientation: new Cesium.HeadingPitchRoll(4.2892217081808806, -0.4799070147502502, 6.279789177843313),
      //     endTransform: Cesium.Matrix4.IDENTITY
      // });

      // var dataSourcePromise = Cesium.CzmlDataSource.load('../SampleData/ClampToGround.czml');
      // zk.viewer.dataSources.add(dataSourcePromise);

      zk.on('click', function (ev) {
        var world = ZK.Util.convertWindowToWorld(ev.position);
        var pos = ZK.Util.convertWorldToLonlat(world)
        console.dir(pos.join(','));
      });


      var tileset = scene.primitives.add(
          new Cesium.Cesium3DTileset({
            // url: '../static/model/3dtiles/NewYork/tileset.json',
            url: '../static/model/3dtiles/3dtiles-JX/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Batched/BatchedColors/tileset.json',
            //     url: '../SampleData/Cesium3DTiles/Batched/BatchedTranslucent/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Batched/BatchedTranslucentOpaqueMix/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Batched/BatchedWithBatchTable/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Classification/Photogrammetry/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Classification/PointCloud/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Tilesets/TilesetWithViewerRequestVolume/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Composite/Composite/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Hierarchy/BatchTableHierarchy/tileset.json',

            // url: '../SampleData/Cesium3DTiles/Instanced/InstancedOrientation/tileset.json',
            // url: '../SampleData/Cesium3DTiles/Instanced/InstancedWithBatchTable/tileset.json',

            // url: '../SampleData/Cesium3DTiles/PointCloud/PointCloudBatched/tileset.json',
            // url: '../SampleData/Cesium3DTiles/PointCloud/PointCloudConstantColor/tileset.json',
            // url: '../SampleData/Cesium3DTiles/PointCloud/PointCloudRGB/tileset.json',
            maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误
            //maximumNumberOfLoadedTiles: 1000,//最大加载瓦片个数
            maximumMemoryUsage: 512,//默认512,内存MB的最大数量
          })
      );
      // tileset.readyPromise.then(function () {
      //   changeHeight(100);
      // });

      //
      // viewer.zoomTo(tileset)
      //     .then(function () {
      //         // changeHeight(100);
      //     })
      //     .otherwise(function (error) {
      //         console.log(error);
      //  });


      //直接调用函数，调整高度,height表示物体离地面的高度
      function changeHeight(height) {
        height = Number(height);
        if (isNaN(height)) {
          return;
        }
        var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        var lonlat = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];

        zk.flyTo({
          position: lonlat,
          time: 10
        });
      }
    },


    demo() {
      var zk = new ZK({
        access_token: this.access_token,
        map: {
          type: 'google',
          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        }
      });

      zk.on('click', function (ev) {
        var world = ZK.Util.convertWindowToWorld(ev.position);
        var pos = ZK.Util.convertWorldToLonlat(world)
        console.dir(pos.join(','));
      });

      zk.viewer.extend(ZK.viewerMeasureMixin);


       //相机飞行
      zk.flyTo({
        position: [113.25963085905904, 21.89118464687422, 1000.082799425431],
        time: 20,
        complete: function () {
      var obj = zk.create({
          type: 'Point',
          coordinates: [113.25963085905904, 21.89118464687422],
          renderer: {
              type: 'vector', // vector 代表使用内置矢量符号
              vectorType: 'circle', // 矢量符号形状 circle(圆形),triangle(三角形),rectangle(正方形),cross(十字)
              color: [255, 0, 0], // 矢量符号填充色
              opacity: 0.5, // 符号不透明度
              lineColor: [255, 255, 0], // 描边颜色
              lineOpacity: 0.8, // 描边透明度
              lineWidth: 2, // 描边宽度
              size: 10, // 缩放比例
              text: '标点',
          },
      });

      var obj = zk.create({
          type: 'Line',
          coordinates: [[113.25963085905904, 21.89118464687422], [113.2580753458505, 21.890175095498943]],
          renderer: {
              type: 'vector', // 代表纯色渲染
              lineType: 'Line',
              width: 2,
              opacity: 0.2,
              color: [255, 0, 0],
          },
      });
      var obj = zk.create({
          type: 'Polygon',
          coordinates: [[113.25846781709878, 21.88535966495798],
              [113.2580753458505, 21.890175095498943],
              [113.26066021941989, 21.890529798222403],
              [113.26131152380138, 21.889274009832423]],
          renderer: {
              type: 'vector', // 纯色填充
              color: [0, 0, 255, 0.5], // 面填充颜色
              outline: true,
              outlineColor: [255, 255, 0, 0.5], // 边框色
              outlineWidth: 2, // 边框宽度
          },
      });


      var car = zk.create({
        type: 'Model',
        url: 'model3D/model.gltf',
        coordinates: [113.25963085905904, 21.89118464687422],
        // complete: function () {
        // }
      });

          //控制轴
          var transformPanel = new ZK.TransformPanel(zk.viewer);
          transformPanel.assetId = car.object;


      var car1 = zk.create({
          type: 'Model',
          url: 'model3D/model.gltf',
          coordinates: [113.25963085905904, 21.89118464687422],
          complete: function () {
          }
      });
      car1.scales([0.005, 0.005, 0.005]);
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/WoodTower/Wood_Tower.gltf',
          coordinates: [113.25846781709878, 21.88535966495798],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Tester.gltf',
          coordinates: [113.2580753458505, 21.890175095498943],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Tester_2.gltf',
          coordinates: [113.25657009451136, 21.890171290455957],
          complete: function () {
          }
      });

      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Tester_3.gltf',
          coordinates: [113.25527275924335, 21.890090328221273],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Tester_4.gltf',
          coordinates: [113.25526575263136, 21.888517949826753],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Tester_Point.gltf',
          coordinates: [113.25676017443864, 21.88861104625519],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/ShadowTester/Shadow_Transparent.gltf',
          coordinates: [113.25818126188199, 21.88865950866358],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/Pawns/Pawns.glb',
          coordinates: [113.25517642813683, 21.88686095396204],
          complete: function () {
          }
      });

      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/GroundVehicle/GroundVehicle.glb',
          coordinates: [113.25696796253396, 21.887206028892674],
          complete: function () {
          }
      });

      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/GroundVehicle/GroundVehicle.glb',
          coordinates: [113.25696796253396, 21.887206028892674],
          complete: function () {
          }
      });

      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb',
          coordinates: [113.25817986879261, 21.887235312984792],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb',
          coordinates: [113.25705258591206, 21.886540431697295],
          complete: function () {
          }
      });
      var car2 = zk.create({
          type: 'Model',
          url: '../SampleData/models/CesiumMan/Cesium_Man.glb',
          coordinates: [113.25823443857134, 21.886613523190736],
          complete: function () {
          }
      });

      var balloon = zk.create({
          type: 'Model',
          url: '../SampleData/models/CesiumBalloon/CesiumBalloon.glb',
          coordinates: [113.25812106721045, 21.886529883511344, 10],
          complete: function () {
          }
      });
      balloon.scales([5, 5, 5]);

      var air = zk.create({
          type: 'Model',
          url: '../SampleData/models/CesiumAir/Cesium_Air.glb',
          coordinates: [113.256435831557, 21.891658911682153, 100],
          complete: function () {
          }
      });
      air.scales([5, 5, 5]);

          car.rotateZ(0);
          car1.rotateZ(180);
          // car.rotate([0,0,0]);
          car.translate([100,0,1]);
          setTimeout(function () {
                  car.destroy();
          },5000);

      car.scales([1,10,1]);
      car.scale = 0.01;
      }
      });
    },
  },

  mounted() {
    this.demo();
    // this.demo3DTiles();

  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}

.fullSize {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

.cesium-viewer-measureContainer {
  position: fixed;
  bottom: 0.75rem;
  left: 1rem;
  z-index: 2;
}

.cesium-measure-instructions {
  background-color: rgb(45, 58, 66);
  color: rgb(255, 255, 255);
  stroke: rgb(255, 255, 255);
  fill: transparent;
  overflow-y: auto;
}

.cesium-measure-toolbar {
  width: 40px;
  height: 43px;
  color: #fff;
  stroke: #fff;
  border-radius: 5px;
  background-color: #2d3a42;
  border: none;
  overflow: hidden;
  transition: width .8s;
  white-space: nowrap;
  stroke-width: 2;
  fill: transparent;
}

.cesium-measure-toolbar.expanded {
  width: 440px;
}

.cesium-measure-toolbar .cesium-measure-button {
  padding: 9px 8px;
}

.cesium-measure-button {
  vertical-align: top;
  display: inline-block;
  border-right: 1px solid #444;
  cursor: pointer;
  padding: 4px 8px;
  height: 25px;
  width: 25px;
  margin-left: -4px;
}

.cesium-measure-button:first-child {
  margin-left: 0;
}

.cesium-measure-button.active {
  background-color: #1a71cc;
  cursor: default;
}

.cesium-measure-toolbar .cesium-measure-button:hover, .cesium-measure-toolbar .cesium-measure-button.active {
  background-color: #2B87C4;
  stroke: #ffffff;
}

.cesium-button.transform-editor-button {
  border-radius: 100%;
  padding: 5px;
}

.transform-editor-menu {
  position: absolute;
  stroke: none;
  fill: #edffff;
}

.transform-editor-options {
  position: relative;
  left: -16px;
  background-color: #303336;
  color: #edffff;
}

.transform-editor-button-row > div {
  display: inline-block;
  cursor: pointer;
  padding-top: 4px;
  padding-left: 4px;
  width: 30px;
  height: 30px;
  border: 1px solid #444;
}


</style>
